<template>
  <div>
    <h2>会员信息录入111</h2>
    <table>
      <tbody>
        <tr>
          <td>名称</td>
          <td>
            <input type="text" v-model="state.vname" />
          </td>
        </tr>

        <tr>
          <td>性别</td>
          <td>
            <input type="text" v-model="state.sex" />
          </td>
        </tr>

        <tr>
          <td>照片</td>
          <td>
            <input type="file" @change="change" />
            <img v-if="src !=''" :src="'https://localhost:7299'+src" alt="" width="70" height="70">
          </td>
        </tr>
        <tr>
          <td>手机号</td>
          <td>
            <input type="text" v-model="state.phone" />
          </td>
        </tr>
        <tr>
          <td>时间</td>
          <td>
            <input type="date" v-model="state.vtime" />
          </td>
        </tr>
        <tr>
          <td>余额</td>
          <td>
            <input type="text" v-model="state.vprice" />
          </td>
        </tr>
        <tr>
          <td>积分</td>
          <td>
            <input type="text" v-model="state.targe" />
          </td>
        </tr>
        <tr>
          <td></td>
          <td>
            <input type="button" value="增加" @click="add" />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import axios from "axios";
import { reactive, toRefs, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();

let data = reactive({
  state: {
    vname: "",
    sex: "",
    photo: "",
    phone: "",
    vtime: "",
    vprice: "",
    targe: "",
  },
  src:'',
});

let { state,src } = toRefs(data);

const change = (e: any) => {
  let obj = e.target.files[0];
  let formData = new FormData();
  formData.append("file", obj);

  axios({
    url: "/api/Photo/Photo",
    method: "post",
    data: formData,
  })
    .then((res) => {
      if ((res.data.code = 1001)) {
        src.value = res.data.data;
        state.value.photo = res.data.data;
      }
    })
    .catch((err) => {
      console.log(err);
    });
};

const add = () => {
  if (state.value.vname == "") {
    alert("名称不能为空");
    return;
  }
  if (state.value.sex == "") {
    alert("性别不能为空");
    return;
  }
  if (state.value.photo == "") {
    alert("照片不能为空");
    return;
  }
  if (state.value.phone == "") {
    alert("手机号不能为空");
    return;
  }
  var reg = /^1[3-9]\d{9}$/;
  if (reg.test(state.value.phone) == false) {
    alert("手机号格式不正确");
    return;
  }
  if (state.value.vtime == "") {
    alert("时间不能为空");
    return;
  }
  if (state.value.vprice == "") {
    alert("价格不能为空");
    return;
  }
  if (state.value.targe == "") {
    alert("积分不能为空");
    return;
  }
  let obj = {
    vname: state.value.vname,
    sex: state.value.sex,
    photo: state.value.photo,
    phone: state.value.phone,
    vtime: state.value.vtime,
    vprice: state.value.vprice,
    targe: state.value.targe,
  };
  axios({
    url: "/api/Vip/AddDeng",
    method: "post",
    data: obj,
  })
    .then((res) => {
      console.log(res);
      if (res.data.data == 1) {
        alert("添加成功");
        router.push("/ShowVip");
      } else if (res.data.data == -1) {
        alert("名称重复");
        return;
      } else {
        alert("添加失败");
        return;
      }
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>

<style scoped>
</style>